首页 E2E 测试实战
本节将使用 Cypress 对知识付费首页项目编写端到端测试用例，覆盖页面加载、菜单导航、轮播图、链接跳转、Tab 切换等核心交互场景。
创建测试文件
在 cypress/e2e/ 目录下新建 home.cy.ts：
describe('Home Page 测试', () => {
it('判断首页菜单栏是否加载正常', () => {
cy.visit('/')
cy.contains('学习')
})
})
typescript
配置 baseUrl
在 cypress.config.ts 或 cypress.env.json 中设置 baseUrl：
{
"baseUrl": "http://localhost:4173"
}
json
测试前需要确保 Vite Preview 服务器运行在对应端口上。`cy.visit()` 默认等待页面 `load` 事件，超过 60 秒自动报错，无需手动判断加载状态。
:::
元素定位策略
在 E2E 测试中定位 DOM 元素有几种策略：
1. 使用 Cypress 选择器工具
Cypress Runner 界面左上角提供了一个交互式选择器工具：
- 点击工具中的目标元素
- 自动生成该元素的 CSS 选择器
- 点击"复制"按钮，粘贴到测试代码中
2. CSS 框架中的特殊符号处理
使用 UnoCSS / Tailwind CSS 等原子化 CSS 框架时，class 名可能包含特殊字符（如 :、/），需要在选择器中进行转义：
// 错误写法
cy.get('.swiper:wrapper')
// 正确写法 — 特殊符号使用双反斜杠转义
cy.get('.swiper\\:wrapper')
typescript
测试轮播图
it('测试首页轮播图', () => {
cy.visit('/')
// 定位第一个轮播图区域，获取其子元素
cy.get('.swiper\\:wrapper')
.first()
.children()
.should('have.length', 3)
})
typescript
使用 `.first()` 确保只测试第一个轮播图组件，避免页面上多个轮播图共用相同 class 导致选择到非目标元素。
:::
Cypress 会为每个操作步骤保留快照（TIMELINE），在 Runner 界面中点击对应步骤即可回溯查看当时的 DOM 状态。
测试导航链接
it('测试导航链接', () => {
cy.visit('/')
// 验证"社区"链接文本和属性
cy.get('.nav\\:link-community')
.contains('社区')
.should('have.attr', 'target', '_blank')
.should('have.attr', 'href', 'https://moke.cn')
})
typescript
多 Tab 的限制
测试页面导航
通过 cy.visit 直接访问
it('访问学习列表页', () => {
cy.visit('/learning')
cy.contains('登录注册')
cy.contains('每日一课')
})
typescript
通过点击导航
it('点击导航跳转到学习页', () => {
cy.visit('/')
cy.get('.nav\\:link-learning')
.click()
// 验证跳转后的页面内容
cy.contains('登录注册')
cy.contains('推荐内容')
cy.contains('每日一课')
})
typescript
测试 Tab 切换
it('测试分类 Tab 切换', () => {
cy.visit('/learning')
// 点击第三个 Tab（React）
cy.get('.tab\\:item')
.eq(2)
.click({ force: true })
// 验证激活状态
cy.get('.tab\\:item')
.eq(2)
.should('have.class', 'active')
})
typescript
force 选项
当目标元素被其他元素遮挡时，Cypress 会阻止点击操作并报错。此时可以使用 { force: true } 强制执行：
.click({ force: true })
typescript
TIP
Cypress 在点击前会自动检查元素是否可见、是否被遮挡、是否禁用等状态。如果这些检查阻止了预期的点击操作，可以通过 force: true 跳过检查。但应谨慎使用，确保不会掩盖真实的 UI 问题。
Cypress 快照调试
Cypress 的一个强大特性是每一步操作都会保留 DOM 快照。在 Runner 界面中：
- 点击某个测试步骤
- 右侧显示该时刻的页面状态
- 可以检查元素、查看 class、验证属性
这使得调试测试失败变得非常直观 — 直接回溯到出错的那一刻，查看 DOM 中的实际内容。
E2E 测试的挑战
与单元测试相比，E2E 测试有以下特点：
| 维度 | 说明 |
|---|---|
| 耗时较长 | 每个用例需要启动浏览器、加载页面、执行操作 |
| 复杂度高 | 需要同时考虑交互逻辑、DOM 定位、异步加载等 |
| 维护成本 | UI 变更可能导致选择器失效 |
| 环境依赖 | 需要 Mock Server、网络等配套环境 |
练习作业
以下两个练习帮助巩固 E2E 测试技能：
1. 搜索课程
在搜索框中输入课程关键词，使用 .type() action 模拟用户输入，验证搜索结果是否正确展示。
2. 购物车复选框
在购物车页面中：
- 使用
.check()选中复选框 - 使用
.uncheck()取消选中 - 验证选中后元素是否变为预期的选中图标
↑